<template>
  <div class="page">
    <div class="title">
      <input v-model="articleTitle" type="text" placeholder="请输入标题">
    </div>
    <div class="richText">
      <tinymce-text :height="748" v-model="content" @getValueText="getValueText" @sendArticle="sendArticle" />
    </div>
    <!-- <div class="save" @click="sendArticle">
      <svg-icon icon-class="send" />
      <el-tooltip content="发布文章" placement="top" effect="light" class="savePositions">
        <el-button size="large">Light</el-button>
      </el-tooltip>
    </div> -->
    <!-- <div class="draft">
      <svg-icon icon-class="caogao1" />
      <el-tooltip content="存入草稿箱" placement="top" effect="light" class="draftPositions">
        <el-button size="large">Light</el-button>
      </el-tooltip>
    </div> -->
  </div>
</template>

<script>
import tinymceText from '@/components/richText/index'
import { editArticle, sendArticleIndex } from '@/api/writeArticle'
import { mapGetters } from 'vuex'
export default {
  components: {
    tinymceText: tinymceText
  },
  props: {
    richText: {
      type: String,
      default: null
    },
    richInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      content: '',
      articleTitle: null
    }
  },
  computed: {
    ...mapGetters(['userId', 'userName', 'userAvatar'])
  },
  watch: {
    richInfo(newVal) {
      this.articleTitle = newVal.articleTitle
      this.content = newVal.articleContent
      console.log(newVal)
    }
  },
  mounted() {
    this.articleTitle = this.richInfo.articleTitle
    this.content = this.richInfo.articleContent
    // console.log(this.userName)
  },
  methods: {
    // sendArticle() {
    //   console.log(this.content)
    //   const data = {
    //     userId: this.userId, // 用户ID
    //     classifyId: this.richText, // 分类ID
    //     articleId: this.richInfo.articleId, // 文章ID
    //     articleTitle: this.articleTitle, // 文章标题
    //     articleContent: this.content
    //   }
    //   if (!this.articleTitle) {
    //     this.$message({
    //       message: '请输入标题名称',
    //       type: 'error'
    //     })
    //     return
    //   }
    //   // if (!this.articleContent) {
    //   //   this.$message({
    //   //     message: '请输入标题',
    //   //     type: 'error'
    //   //   })
    //   //   return
    //   // }
    //   editArticle(data).then(response => {
    //     const date = Date.parse(new Date())
    //     this.$emit('refresh', date)
    //   })
    // }
    getValueText(value) {
      // console.log(value)
      const data = {
        userId: this.userId, // 用户ID
        classifyId: this.richText, // 分类ID
        articleId: this.richInfo.articleId, // 文章ID
        articleTitle: this.articleTitle, // 文章标题
        articleContent: value
      }
      if (!this.articleTitle) {
        this.$message({
          message: '请输入标题名称',
          type: 'error'
        })
        return
      }
      if (!value) {
        this.$message({
          message: '请输入内容',
          type: 'error'
        })
        return
      }
      editArticle(data).then(response => {
        const date = Date.parse(new Date())
        this.$emit('refresh', date)
      })
    },
    // 发送文章
    sendArticle(value) {
      this.getValueText(value)
      const data = {
        userId: this.userId, // 用户ID
        classifyId: this.richText, // 分类ID
        articleId: this.richInfo.articleId, // 文章ID
        articleTitle: this.articleTitle, // 文章标题
        articleContent: value,
        userName: this.userName,
        userAvatar: this.userAvatar
      }
      this.$confirm('确定发布吗？', '提示', {
        confirmTextButton: '确定',
        cancelTextButton: '取消'
      }).then(() => {
        sendArticleIndex(data).then(response => {
          console.log(response)
          const date = Date.parse(new Date())
          this.$emit('refresh', date)
        })
      })
    }
  }
}
</script>

<style scoped lang="stylus">
// .page
//   position: absolute
//   height: 100%
  .title
    width: 100%
    font-size: 25px
    opacity: 0.8
    height: 11%
    & input
      width: 100%
      font-weight: 490
      line-height:70px
      height: 100%
      outline: none
      padding: 20px 0
      padding-left: 20px
      border: none
      border-left: 1px solid #d9d9d9
      background: #fff
  .richText
    overflow: hidden
    height: 89%
  .save
    position: fixed;
    font-size: 60px;
    bottom: 10%;
    right: 35%;
    cursor: pointer;
    opacity: 0.5;
    &:hover
      opacity: .7
    .savePositions
      position: absolute;
      right: 0px;
      bottom: 25px;
      opacity: 0
  .draft
    position: fixed;
    font-size: 60px;
    bottom: 10%;
    right: 15%;
    cursor: pointer;
    opacity: 0.5;
    &:hover
      opacity: .7
    .draftPositions
      position: absolute;
      right: 0px;
      bottom: 25px;
      opacity: 0
</style>
